<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Device Info</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.49/polyfill.min.js"></script> -->

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #000;
            padding: 10px;
        }

        h1 {
            color: #26ff00;
            padding-bottom: 20px;
        }

        p {
            font-size: 18px;
            color: #26ff00;
            line-height: 30px;
        }

        p span {
            font-weight: bold;
            padding-left: 10px;
            color: red;
        }

        [v-cloak] {
            display: none;
        }

        .true {
            color: yellow;
            padding-right: 10px;
            padding-left: 0;
        }
    </style>
</head>

<body>
    <div id='app' v-cloak>
        <h1>Device Info</h1>
        <p>isOnline: <span>{{isOnline}}</span></p>
        <p>Network Type: <span>{{Network}}</span></p>
        <p>Screen: <span>{{Screen}}</span></p>
        <p>Device DPR: <span>{{deviceDPR}}</span></p>
        <p>Device Models: <span>{{DeviceModels}}</span></p>
        <p>platform: <span>{{platform}}</span></p>
        <p><span class="true">[true]</span>OS Type: <span>{{OSType}}</span></p>
        <p>OS Versions: <span>{{OSVersions}}</span></p>
        <p>OS Time: <span>{{Time}}</span></p>
        <p>GPU: <span>{{gpu}}</span></p>
        <p>Local IP: <span>{{localIP}}</span></p>
        <p>Public IP: <span>{{publicIP}}</span></p>
        <p>Public IP City: <span>{{ipCity}}</span></p>
        <p>timestamp2: <span>{{timestamp2}}</span></p>
        <p><span class="true">[true]</span>timestamp: <span>{{timestamp}}</span></p>
        <p><span class="true">[true]</span>Public IP Count: <span>{{publicIPCount}}</span></p>
        <p><span class="true">[true]</span>OS Version: <span>{{OSVersion}}</span></p>
        <p>Wechat Version: <span>{{wxversion}}</span></p>
        <p>User Agent: <span>{{userAgent}}</span></p>
        <!-- <p>Browser Type: <span>{{BrowserType}}</span></p>
        <p>Browser Version: <span>{{BrowserVersion}}</span></p> -->
    </div>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="mobile-detect.min.js?2"></script>
    <script src="device.js?1"></script>
    <script src="useragent.min.js?2"></script>
    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        var vm = new Vue({
            el: '#app',
            data: {
                isOnline: '',
                Network: 'Unknown',
                platform: 'Unknown',
                Screen: window.screen.width + ' * ' + window.screen.height,
                deviceDPR: window.devicePixelRatio,
                publicIP: '',
                publicIPCount: '',
                gpu:MobileDevice.getGlRenderer(),
                localIP: 'Unknown',
                ipCity: '',
                wxversion:'Unknown',
                Time: '',
                timestamp: '',
                timestamp2: '',
                OSType: 'Unknown',
                OSVersion: 'Unknown',
                OSVersions: 'Unknown',
                DeviceModels: 'Unknown',
                userAgent: '',
            },
            methods: {
                // https://github.com/diafygi/webrtc-ips
                //get the IP addresses associated with an account
                getIPs: function (callback) {
                    var ip_dups = {};

                    //compatibility for firefox and chrome
                    var RTCPeerConnection = window.RTCPeerConnection ||
                        window.mozRTCPeerConnection ||
                        window.webkitRTCPeerConnection;
                    var useWebKit = !!window.webkitRTCPeerConnection;

                    //bypass naive webrtc blocking using an iframe
                    if (!RTCPeerConnection) {
                        //NOTE: you need to have an iframe in the page right above the script tag
                        //
                        //<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
                        //<script>...getIPs called in here...
                        //
                        var win = iframe.contentWindow;
                        RTCPeerConnection = win.RTCPeerConnection ||
                            win.mozRTCPeerConnection ||
                            win.webkitRTCPeerConnection;
                        useWebKit = !!win.webkitRTCPeerConnection;
                    }

                    //minimal requirements for data connection
                    var mediaConstraints = {
                        optional: [{
                            RtpDataChannels: true
                        }]
                    };

                    var servers = {
                        iceServers: [{
                            urls: "stun:stun.services.mozilla.com"
                        }]
                    };

                    //construct a new RTCPeerConnection
                    var pc = new RTCPeerConnection(servers, mediaConstraints);

                    function handleCandidate(candidate) {
                        //match just the IP address
                        var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
                        var ip_addr = ip_regex.exec(candidate)[1];

                        //remove duplicates
                        if (ip_dups[ip_addr] === undefined)
                            callback(ip_addr);

                        ip_dups[ip_addr] = true;
                    }

                    //listen for candidate events
                    pc.onicecandidate = function (ice) {

                        //skip non-candidate events
                        if (ice.candidate)
                            handleCandidate(ice.candidate.candidate);
                    };

                    //create a bogus data channel
                    pc.createDataChannel("");

                    //create an offer sdp
                    pc.createOffer(function (result) {

                        //trigger the stun server request
                        pc.setLocalDescription(result, function () {}, function () {});

                    }, function () {});

                    //wait for a while to let everything done
                    setTimeout(function () {
                        //read candidate info from local description
                        var lines = pc.localDescription.sdp.split('\n');

                        lines.forEach(function (line) {
                            if (line.indexOf('a=candidate:') === 0)
                                handleCandidate(line);
                        });
                    }, 1000);
                },

                //获取时间
                getTimes: function (bol) {
                    var timestamp = '';
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    var second = date.getSeconds();
                    month > 10 ? month : month = '0' + month;
                    day > 10 ? day : day = '0' + day;
                    minute > 10 ? minute : minute = '0' + minute;
                    second > 10 ? second : second = '0' + second;
                    // console.log(year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second)
                    if (!!bol) {
                        timestamp = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
                    } else {
                        timestamp = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':00';
                    }
                    console.log(timestamp);
                    console.log(Date.parse(timestamp));
                    return timestamp;
                },

                //ip计算
                ipCount: (ip) => {
                    let arr = ip.split('.');
                    let count = (arr[0] * 256 * 256 * 256) + (arr[1] * 256 * 256) + (arr[2] * 256) + Number(arr[3]);
                    return count
                },
            },
            created() {

            },
            mounted() {
                if (navigator.getUserMedia) {
                    this.getIPs((ip) => {
                        this.localIP = ip;
                        console.log(ip)
                    });
                } else {
                    this.localIP = 'Unknown'
                };
                if(UA.IsWechat() != false){
                    this.wxversion = UA.IsWechat().version;
                }
                this.isOnline = window.navigator.onLine;
                this.Network = UA.NetworkType();
                this.platform = window.navigator.platform;
                // http://pv.sohu.com/cityjson
                this.publicIP = returnCitySN["cip"];
                this.ipCity = returnCitySN["cname"];
                this.publicIPCount = this.ipCount(returnCitySN["cip"])

                this.Time = this.getTimes(true)
                this.timestamp = Date.parse(this.getTimes());
                this.timestamp2 = Date.parse(this.getTimes(true));

                //判断数组中是否包含某字符串
                Array.prototype.contains = function (needle) {
                    for (i in this) {
                        if (this[i].indexOf(needle) > 0) return i;
                    }
                    return -1;
                }
                var device_type = navigator.userAgent; //获取userAgent信息
                var md = new MobileDetect(device_type); //初始化mobile-detect 
                var os = md.os(); //获取系统 
                var osVersion = 'Unknown';
                var model = "";
                if (os == "iOS") { //ios系统的处理
                    os = 'IOS'
                    osVersion = md.version("iPhone");
                    model = md.mobile();
                } else if (os == "AndroidOS") { //Android系统的处理 
                    os = "Android"
                    osVersion = md.version("Android");
                    var sss = device_type.split(";");
                    var i = sss.contains("Build/");
                    if (i > -1) {
                        model = sss[i].substring(0, sss[i].indexOf("Build/"));
                    }
                }
                var _arr = osVersion.split('.')
                this.OSType = UA.DeviceType().type;
                this.OSVersion = _arr[0];
                this.OSVersions = UA.DeviceType().version;
                this.DeviceModels = model;
                this.userAgent = window.navigator.userAgent;

            },
        })
    </script>
</body>

</html>